<template>
  <view class="wrapper">
    <view class="form">
      <u--form
          labelPosition="left"
          :model="postForm"
          :rules="rules"
          ref="uForm"
          class="form"
          labelWidth="100rpx"
          labelAlign="right"
          :labelStyle="{'font-size': '24rpx', 'padding-right': '20rpx', 'margin-top': '-3rpx'}"
      >
        <u-form-item label="主题:" prop="title">
          <u--input
              v-model="postForm.title"
              border="surround"
              fontSize="24rpx"
              :customStyle="{'height': '30rpx'}"
          ></u--input>
        </u-form-item>
        <u-form-item label="分类:" @click="show = true">
          <u--input
              v-model="postForm.category_name"
              border="surround"
              fontSize="24rpx"
              :customStyle="{'height': '30rpx'}"
          ></u--input>
        </u-form-item>
        <u-form-item label="主图:">
          <u-upload
              :fileList="postForm.imageList"
              width="160rpx"
              height="160rpx"
              :deletable="true"
              @afterRead="afterRead"
              @delete="deletePic"
              :maxCount="10"
          ></u-upload>
        </u-form-item>
        <u-form-item label="详情:">
          <u--textarea
              v-model="postForm.content"
              border="surround"
              fontSize="24rpx"
              :height="200"
              confirmType="return"
          ></u--textarea>
        </u-form-item>
        <u-button class="btn" :color="activeColor" @click="save" text="发布"></u-button>
      </u--form>
      <u-picker itemHeight="100" :show="show" keyName="name" :columns="columns"
                @cancel="show = false" @confirm="changeCategory"></u-picker>
    </view>
  </view>
</template>

<script>
import color from '@/config/color.js'
import config from '../../config/config'
import base64 from '../../util/base64'

import Material from '../../api/material'
const MaterialModel = new Material()

export default {
  data() {
    return {
      activeColor: color.main_color,
      postForm: {
        title: '',
        category: null,
        category_name: null,
        imageList: [],
        content: ''
      },
      rules: {
        title: {
          type: 'string',
          required: true,
          message: '请填主题',
          trigger: ['blur', 'change']
        },
      },
      disabled: false,
      show: false,
      columns: []
    }
  },
  methods: {
    getCategory() {
      MaterialModel.getCategory().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.columns = [data.list]
        // console.log(this.columns)
        // data.list.forEach(x => {
        //   this.columns.push({
        //     id: x.id,
        //     label: x.name
        //   })
        // })
      })
    },
    changeCategory(e) {
      // console.log(e)
      const { value } = e
      this.postForm.category = value[0].id
      this.postForm.category_name = value[0].name
      console.log(this.postForm)
      this.show = false
    },
    deletePic(event) {
      // console.log(event)
      const { file } = event
      this.postForm.imageList = this.postForm.imageList.filter(x => {
        if (!(x.name === file.name && x.id === file.id)) {
          return x
        }
      })
    },
    afterRead(e) {
      const { file } = e
      const { url } = file
      const target = `${config.baseUrl}/h5/upload/material?max-width=750`
      const token = this.$store.getters['User/token']
      uni.uploadFile({
        url: target,
        name: 'file',
        filePath: url,
        header: {
          [config.token_name]: token
        },
        success: response => {
          uni.showToast({
            icon: 'none',
            title: '上传成功'
          })
          let { data } = response
          data = JSON.parse(data)
          // console.log(data)
          const path = data.data.full_name
          const url = config.baseUrl + path
          const obj = {
            id: data.data.id,
            name: data.data.name,
            url: url
          }
          this.postForm.imageList.push(obj)
        }
      })
    },
    save() {
      this.$refs.uForm.validate().then(res => {
        if (res && !this.disabled) {
          if (!this.postForm.category) {
            return uni.showToast({
              icon: 'none',
              title: '请选择分类'
            })
          }
          this.disabled = true
          MaterialModel.edit({ ...this.postForm }).then(() => {
            uni.showToast({
              icon: 'none',
              title: '发布成功,等待审核中!'
            })
            // this.disabled = false
            setTimeout(() => {
              uni.navigateTo({
                url: '/sub_main/material/index'
              })
            }, 500)
          })
        }
      }).catch(e => {
        this.disabled = false
      })
    },
  },
  onLoad(options) {
    this.getCategory()
  },
  onHide() {
    this.postForm = {
      title: '',
      category: null,
      category_name: null,
      imageList: [],
      content: ''
    }
    this.disabled = false
  }
}


</script>

<style lang="scss" scoped>
.wrapper {
  padding: 20rpx;
  background: $background_color;
  height: 100vh;
  box-sizing: border-box;
  .form {
    background: white;
    padding: 20rpx;
    border-radius: 10rpx;
    .btn {
      margin-top: 20px;
    }
  }
}
</style>
